<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>表格 | Vue Studio</title>
    <meta name="description" content="vue3 component、directive and template">
    <meta name="generator" content="VitePress v1.3.3">
    <link rel="preload stylesheet" href="/vue-desktop-docs/assets/style.BMxc4X2o.css" as="style">
    
    <script type="module" src="/vue-desktop-docs/assets/app.JbIU71ct.js"></script>
    <link rel="preload" href="/vue-desktop-docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/chunks/theme.BjUYIGhO.js">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/chunks/framework.C6Mn0AED.js">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/chunks/data.C6Rv5I_3.js">
    <link rel="modulepreload" href="/vue-desktop-docs/assets/components_table_index.md.Clyvrf1v.lean.js">
    <link rel="icon" href="">
    <meta name="viewport" content="width=device-width,height=device-height, maximum-scale=1.0,minimum-scale=1.0">
    <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?119b5519877c96ec2bac58dea8acfafa";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-ff741247><!--[--><!--]--><!--[--><span tabindex="-1" data-v-d317c710></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-d317c710> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ff741247 data-v-d496a4c4><div class="VPNavBar has-sidebar top" data-v-d496a4c4 data-v-dbdf4b99><div class="wrapper" data-v-dbdf4b99><div class="container" data-v-dbdf4b99><div class="title" data-v-dbdf4b99><div class="VPNavBarTitle has-sidebar" data-v-dbdf4b99 data-v-733ea456><a class="title" href="/vue-desktop-docs/" data-v-733ea456><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-desktop-docs/logo.svg" alt data-v-fe9b4f1c><!--]--><span data-v-733ea456>Vue Studio</span><!--[--><!--]--></a></div></div><div class="content" data-v-dbdf4b99><div class="content-body" data-v-dbdf4b99><!--[--><!--]--><div class="VPNavBarSearch search" data-v-dbdf4b99><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-dbdf4b99 data-v-aaed27d4><span id="main-nav-aria-label" class="visually-hidden" data-v-aaed27d4> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/guide/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/components/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>组件</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/directives/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>指令</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-desktop-docs/utils/" tabindex="0" data-v-aaed27d4 data-v-0aca8eb0><!--[--><span data-v-0aca8eb0>utils</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-dbdf4b99 data-v-866269b0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-866269b0 data-v-45042928 data-v-e2492e27><span class="check" data-v-e2492e27><span class="icon" data-v-e2492e27><!--[--><span class="vpi-sun sun" data-v-45042928></span><span class="vpi-moon moon" data-v-45042928></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-dbdf4b99 data-v-9375ef87 data-v-adb166d8><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-adb166d8><span class="vpi-more-horizontal icon" data-v-adb166d8></span></button><div class="menu" data-v-adb166d8><div class="VPMenu" data-v-adb166d8 data-v-23278366><!----><!--[--><!--[--><!----><div class="group" data-v-9375ef87><div class="item appearance" data-v-9375ef87><p class="label" data-v-9375ef87>Appearance</p><div class="appearance-action" data-v-9375ef87><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-9375ef87 data-v-45042928 data-v-e2492e27><span class="check" data-v-e2492e27><span class="icon" data-v-e2492e27><!--[--><span class="vpi-sun sun" data-v-45042928></span><span class="vpi-moon moon" data-v-45042928></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-dbdf4b99 data-v-df3472bb><span class="container" data-v-df3472bb><span class="top" data-v-df3472bb></span><span class="middle" data-v-df3472bb></span><span class="bottom" data-v-df3472bb></span></span></button></div></div></div></div><div class="divider" data-v-dbdf4b99><div class="divider-line" data-v-dbdf4b99></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-ff741247 data-v-a9a790fc><div class="container" data-v-a9a790fc><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a9a790fc><span class="vpi-align-left menu-icon" data-v-a9a790fc></span><span class="menu-text" data-v-a9a790fc>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a9a790fc data-v-2d8f0263><button data-v-2d8f0263>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-ff741247 data-v-12f3e4fe><div class="curtain" data-v-12f3e4fe></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-12f3e4fe><span class="visually-hidden" id="sidebar-aria-label" data-v-12f3e4fe> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-f5581e34><section class="VPSidebarItem level-0 has-active" data-v-f5581e34 data-v-362a204f><!----><div class="items" data-v-362a204f><!--[--><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/index.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/grid/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Grid - 网格</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/query.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Query - 查询器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/table/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Table - 表格</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/table-select/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>TableSelect - 表格选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/tree.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Tree - 树</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/trend.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Trend - 趋势</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/filter.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Filter - 分类筛选器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/flow.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Flow - 流程图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/dot/" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Dot - 圆点</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/wizard.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Wizard - 场景向导</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-362a204f data-v-362a204f><div class="item" data-v-362a204f><div class="indicator" data-v-362a204f></div><a class="VPLink link link" href="/vue-desktop-docs/components/upload.html" data-v-362a204f><!--[--><p class="text" data-v-362a204f>Upload - 附件上传（开发中）</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-ff741247 data-v-129d407d><div class="VPDoc has-sidebar has-aside" data-v-129d407d data-v-beb5ee4a><!--[--><!--]--><div class="container" data-v-beb5ee4a><div class="aside" data-v-beb5ee4a><div class="aside-curtain" data-v-beb5ee4a></div><div class="aside-container" data-v-beb5ee4a><div class="aside-content" data-v-beb5ee4a><div class="VPDocAside" data-v-beb5ee4a data-v-1850f0ea><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-1850f0ea data-v-7f16107f><div class="content" data-v-7f16107f><div class="outline-marker" data-v-7f16107f></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-7f16107f>On this page</div><ul class="VPDocOutlineItem root" data-v-7f16107f data-v-49ce05e3><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-1850f0ea></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-beb5ee4a><div class="content-container" data-v-beb5ee4a><!--[--><!--]--><main class="main" data-v-beb5ee4a><div style="position:relative;" class="vp-doc _vue-desktop-docs_components_table_" data-v-beb5ee4a><div><h1 id="表格" tabindex="-1">表格 <a class="header-anchor" href="#表格" aria-label="Permalink to &quot;表格&quot;">​</a></h1><h2 id="简介" tabindex="-1">简介 <a class="header-anchor" href="#简介" aria-label="Permalink to &quot;简介&quot;">​</a></h2><p>基于<a href="https://element-plus.org/zh-CN/component/table.html" target="_blank" rel="noreferrer">el-table</a>二次封装。</p><p>扩展：请求接管、拖拽排序、条件搜索、列动态显示、单\多选等特性</p><h2 id="样例" tabindex="-1">样例 <a class="header-anchor" href="#样例" aria-label="Permalink to &quot;样例&quot;">​</a></h2><h3 id="基础用法-重置分页属性" tabindex="-1">基础用法 / 重置分页属性 <a class="header-anchor" href="#基础用法-重置分页属性" aria-label="Permalink to &quot;基础用法 / 重置分页属性&quot;">​</a></h3><p>使用<code>data</code>实现基础表格（客户端分页），其他属性说明如下：</p><p>1、必填项<code>columns</code>，表示列配置</p><ul><li><code>prop</code>, 必填项，<code>prop</code>支持多层级，如：prop: <code>user.detail.age</code>。</li><li><code>label</code>, 必填项，表示列名。</li><li><code>width</code>，可选项，表示列名。</li><li><code>render</code>，可选项。实现<code>列内容</code>自定义。</li></ul><p>2、可选项<code>toolButton</code>， 表示右上角按钮显藏开关。值类型<code>boolean</code>或 <code>string[]</code>。可选值&quot;refresh&quot; / &quot;setting&quot; / &quot;search&quot;</p><p>3、可选项<code>defaultPageSize</code> 表示设置每页最多显示x条，默认是<code>10</code>条</p><!----><h3 id="单选" tabindex="-1">单选 <a class="header-anchor" href="#单选" aria-label="Permalink to &quot;单选&quot;">​</a></h3><p>通过<code>el-table</code>的原生事件<a href="https://element-plus.org/zh-CN/component/table.html#table-%E4%BA%8B%E4%BB%B6" target="_blank" rel="noreferrer">current-change</a>接收</p><!----><h3 id="多选" tabindex="-1">多选 <a class="header-anchor" href="#多选" aria-label="Permalink to &quot;多选&quot;">​</a></h3><p>通过<code>el-table</code>的原生事件<a href="https://element-plus.org/zh-CN/component/table.html#table-%E4%BA%8B%E4%BB%B6" target="_blank" rel="noreferrer">selection-change</a>接收选中项</p><!----><h3 id="拖拽排序-多选-展开项" tabindex="-1">拖拽排序&amp;多选&amp;展开项 <a class="header-anchor" href="#拖拽排序-多选-展开项" aria-label="Permalink to &quot;拖拽排序&amp;多选&amp;展开项&quot;">​</a></h3><div class="info custom-block"><p class="custom-block-title">INFO</p><p>内置<a href="#column-属性">5 种列</a><code>type</code>。分别是：行号&quot;index”、多选&quot;selection&quot;、单选&quot;radio&quot;、展开&quot;expand&quot;和拖拽排序&quot;sort&quot;</p></div><p>有禁止选中需求，可通过<a href="https://element-plus.org/zh-CN/component/table.html#table-column-api" target="_blank" rel="noreferrer">selectable</a>实现</p><!----><h3 id="查询表格-必填校验" tabindex="-1">查询表格 / 必填校验 <a class="header-anchor" href="#查询表格-必填校验" aria-label="Permalink to &quot;查询表格 / 必填校验&quot;">​</a></h3><div class="info custom-block"><p class="custom-block-title">INFO</p><p><code>列属性</code>配置<code>search</code>字段即可。如果是<code>select</code>、<code>tree-select</code>等还需要配置<code>enum</code></p><p>样例中<strong>用户名</strong>有必填校验且默认无值，可配置<code>:request-auto=&quot;false&quot;</code>，让表格初始化时不自动发起请求 <a href="#searchprops">更多介绍</a></p></div><!----><h3 id="自定义搜索-客户端分页" tabindex="-1">自定义搜索 / 客户端分页 <a class="header-anchor" href="#自定义搜索-客户端分页" aria-label="Permalink to &quot;自定义搜索 / 客户端分页&quot;">​</a></h3><p>通过<a href="#table-事件">search</a>事件，实现自定义搜索，可以设置<code>loading</code>显示加载效果，</p><div class="info custom-block"><p class="custom-block-title">INFO</p><p><code>tableProps.onSearch</code>对应<a href="#table-事件">search</a>事件，如果不用<code>v-bind</code>结构。可直接<code>@search</code>挂到<code>vs-table</code>上。 <code>handleSearch</code>接收一个参数，表示当前所有搜索条件。当表单校验失败时，不会触发<code>handleSearch</code></p></div><!----><h2 id="api" tabindex="-1">api <a class="header-anchor" href="#api" aria-label="Permalink to &quot;api&quot;">​</a></h2><h3 id="table-属性" tabindex="-1">table 属性 <a class="header-anchor" href="#table-属性" aria-label="Permalink to &quot;table 属性&quot;">​</a></h3><div class="info custom-block"><p class="custom-block-title">INFO</p><p>使用 <code>v-bind=&quot;$attrs&quot;</code> 通过属性透传将 <strong>vsTable</strong> 组件属性全部透传到 <strong>el-table</strong> 上，所以我们支持 <strong>el-table</strong> 的所有 <strong>Props</strong> 属性。在此基础上，还扩展了以下 <strong>Props：</strong></p><p><a href="https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7" target="_blank" rel="noreferrer">el-table 属性文档链接</a></p></div><table tabindex="0"><thead><tr><th>属性名</th><th>类型</th><th>必传</th><th>默认值</th><th>属性描述</th></tr></thead><tbody><tr><td>columns</td><td><a href="#column-属性">ColumnProps</a></td><td>✅</td><td>[]</td><td>ProTable 组件会根据此字段渲染搜索表单与表格列（支持动态更新），详情见 ColumnProps</td></tr><tr><td>data</td><td>Array</td><td>❌</td><td>—</td><td>静态 tableData 数据（支持分页），若存在则不会使用 requestApi 返回的 data</td></tr><tr><td>requestApi</td><td>Function</td><td>❌</td><td>—</td><td>获取表格数据的请求 API</td></tr><tr><td>requestAuto</td><td>Boolean</td><td>❌</td><td>true</td><td>表格初始化时是否自动执行请求 API</td></tr><tr><td>requestError</td><td>Function</td><td>❌</td><td>—</td><td>表格 API 请求错误监听</td></tr><tr><td>dataCallback</td><td>Function</td><td>❌</td><td>—</td><td>后台返回数据的回调函数，可对后台返回数据进行处理</td></tr><tr><td>title</td><td>String</td><td>❌</td><td>—</td><td>表格标题，目前没有用到</td></tr><tr><td>pagination</td><td>Boolean</td><td>❌</td><td>true</td><td>是否显示分页组件：pagination 为 false 后台返回数据应该没有分页信息 和 list 字段，data 就是 list 数据</td></tr><tr><td>defaultParams</td><td>Object</td><td>❌</td><td>{}</td><td>表格请求的初始化参数，该值变化会重新请求表格数据</td></tr><tr><td>rowKey</td><td>String</td><td>❌</td><td>&#39;id&#39;</td><td>当表格数据多选时，所指定的 id</td></tr><tr><td>toolButton</td><td>Boolean / string[]</td><td>❌</td><td>true</td><td>是否显示表格功能按钮，支持（[&quot;refresh&quot; / &quot;setting&quot; / &quot;search&quot;]）</td></tr><tr><td>searchCol</td><td>Number / Object</td><td>❌</td><td><span class="tt"><span class="ttt"><code>{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }</code></span></span></td><td>表格搜索项每列占比配置</td></tr><tr><td>defaultPageSize</td><td>Number</td><td>❌</td><td>10</td><td>默认分页大小置</td></tr><tr><td>paginationProps</td><td><a href="https://github.com/element-plus/element-plus/blob/dev/packages/components/pagination/src/pagination.ts#L176" target="_blank" rel="noreferrer">PaginationProps</a></td><td>❌</td><td><code>{}</code></td><td>支持ElPagination的所有属性，用户重置Table内部的分页组件</td></tr></tbody></table><h3 id="column-属性" tabindex="-1">column 属性 <a class="header-anchor" href="#column-属性" aria-label="Permalink to &quot;column 属性&quot;">​</a></h3><div class="info custom-block"><p class="custom-block-title">INFO</p><p>使用 <code>v-bind=&quot;column&quot;</code> 通过属性透传将每一项 <strong>column</strong> 属性全部透传到 <strong>el-table-column</strong> 上，所以我们支持 <strong>el-table-column</strong> 的所有 <strong>Props</strong> 属性。在此基础上，还扩展了以下 <strong>Props：</strong></p></div><table tabindex="0"><thead><tr><th>属性名</th><th>类型</th><th>必传</th><th>默认值</th><th>属性描述</th></tr></thead><tbody><tr><td>type</td><td>String</td><td>❌</td><td>—</td><td>可选值 &quot;index&quot; \ &quot;selection&quot; \ &quot;radio&quot; \ &quot;expand&quot; \ &quot;sort&quot;</td></tr><tr><td>tag</td><td>Boolean</td><td>❌</td><td>false</td><td>当前单元格值是否为标签展示，可通过 enum 数据中 tagType 字段指定 tag 类型</td></tr><tr><td>isShow</td><td>Boolean</td><td>❌</td><td>true</td><td>当前列是否显示在表格内，设置只搜索不展示在表格中（只对 prop 列生效）</td></tr><tr><td>isSetting</td><td>Boolean</td><td>❌</td><td>true</td><td>当前列是否在 ColSetting 中可配置（只对 prop 列生效）</td></tr><tr><td>search</td><td><a href="#searchprops">SearchProps</a></td><td>❌</td><td>—</td><td>搜索项配置，详情见 SearchProps</td></tr><tr><td>enum</td><td>Array / () =&gt; Promise</td><td>❌</td><td>—</td><td>可以是对象数组（本地数据）或api请求函数。<br>这样的请求函数：，Promise预期返回对象<code>{data}</code></td></tr><tr><td>isFilterEnum</td><td>Boolean</td><td>❌</td><td>true</td><td>当前单元格值是否根据 enum 格式化（例如 enum 只作为搜索项数据，不参与内容格式化）</td></tr><tr><td>fieldNames</td><td>Object</td><td>❌</td><td>—</td><td>内置组件是按 label &amp;&amp; value &amp;&amp; children 的 key 消费 enum 数据，如果传入的 enum 不符合，可通过该字段修改 key</td></tr><tr><td>headerRender</td><td>Function</td><td>❌</td><td>—</td><td>自定义表头内容渲染（tsx 语法、h 语法）</td></tr><tr><td>render</td><td>Function</td><td>❌</td><td>—</td><td>自定义单元格内容渲染（tsx 语法、h 语法）</td></tr><tr><td>_children</td><td>ColumnProps</td><td>❌</td><td>—</td><td>多级表头</td></tr></tbody></table><h3 id="searchprops" tabindex="-1">SearchProps <a class="header-anchor" href="#searchprops" aria-label="Permalink to &quot;SearchProps&quot;">​</a></h3><div class="info custom-block"><p class="custom-block-title">INFO</p><p>使用 <code>v-bind=&quot;column.search.props&quot;</code> 通过属性透传将 <strong>search.props</strong> 属性全部透传到每一项搜索组件上，所以我们支持 <strong>input、select、tree-select、date-packer、time-picker、time-select、switch</strong> 大部分属性，并在其基础上还扩展了以下 <strong>Props：</strong></p></div><table tabindex="0"><thead><tr><th>属性名</th><th>类型</th><th>必传</th><th>默认值</th><th>属性描述</th></tr></thead><tbody><tr><td>el</td><td>String</td><td>❌</td><td>—</td><td>当前项搜索框的类型，支持：input、input-number、select、select-v2、tree-select、cascader、date-picker、time-picker、time-select、switch、slider、vs-table-select</td></tr><tr><td>label</td><td>String</td><td>❌</td><td>—</td><td>当搜索项 label，如果不指定默认取 column 的 label</td></tr><tr><td>props</td><td>Object</td><td>❌</td><td>—</td><td>根据 element plus 官方文档来传递，该属性所有值会透传到组件</td></tr><tr><td>key</td><td>String</td><td>❌</td><td>—</td><td>当搜索项 key 不为 prop 属性时，可通过 key 指定</td></tr><tr><td>tooltip</td><td>String</td><td>❌</td><td>—</td><td>搜索提示</td></tr><tr><td>order</td><td>Number</td><td>❌</td><td>—</td><td>搜索项排序（从小到大）</td></tr><tr><td>span</td><td>Number</td><td>❌</td><td>1</td><td>搜索项所占用的列数，默认为 1 列</td></tr><tr><td>offset</td><td>Number</td><td>❌</td><td>—</td><td>搜索字段左侧偏移列数</td></tr><tr><td>defaultValue</td><td>Any</td><td>❌</td><td>—</td><td>搜索项默认值（该值重置时会重置回初始值）</td></tr><tr><td>render</td><td>Function</td><td>❌</td><td></td><td>自定义搜索内容渲染（tsx 语法、h 语法）</td></tr></tbody></table><h3 id="table-事件" tabindex="-1">table 事件 <a class="header-anchor" href="#table-事件" aria-label="Permalink to &quot;table 事件&quot;">​</a></h3><div class="info custom-block"><p class="custom-block-title">INFO</p><p>根据 <strong>ElementPlus Table</strong> 文档在 <strong>vsTable</strong> 组件上绑定事件即可，组件会通过 <strong>$attrs</strong> 透传给 <strong>el-table</strong>。</p><p><a href="https://element-plus.org/zh-CN/component/table.html#table-%E4%BA%8B%E4%BB%B6" target="_blank" rel="noreferrer">el-table 事件文档链接</a></p></div><table tabindex="0"><thead><tr><th>事件名</th><th>描述</th><th>回调参数</th></tr></thead><tbody><tr><td>dragSort</td><td>表格拖拽排序成功后触发，</td><td><code>{ newIndex, oldIndex }</code></td></tr><tr><td>search</td><td>点击表格搜索按钮时会触发</td><td><code>params</code> 一个参数，可能你是对象或undefined</td></tr><tr><td>reset</td><td>点击表格重置按钮时会触发</td><td>—</td></tr><tr><td>expand</td><td>点击<code>展开/收起</code>时会触发</td><td><code>expanded</code> 接收一个boolean表示当前是展开还是收起状态</td></tr></tbody></table><h3 id="table-方法" tabindex="-1">table 方法 <a class="header-anchor" href="#table-方法" aria-label="Permalink to &quot;table 方法&quot;">​</a></h3><div class="info custom-block"><p class="custom-block-title">INFO</p><p><strong>vsTable</strong> 组件暴露了 <strong>el-table</strong> 实例和一些组件内部的参数和方法：</p><p><a href="https://element-plus.org/zh-CN/component/table.html#table-%E6%96%B9%E6%B3%95" target="_blank" rel="noreferrer">el-table 方法文档链接</a></p></div><table tabindex="0"><thead><tr><th>方法名</th><th>描述</th></tr></thead><tbody><tr><td>element</td><td><code>el-table</code> 实例，可以通过<code>proTable.value.element.***()</code>来调用 <code>el-table</code> 的所有方法</td></tr><tr><td>tableData</td><td>当前页面所展示的数据</td></tr><tr><td>radio</td><td>当前表格单选值（指定 type 为 &quot;radio&quot; 时可取到）</td></tr><tr><td>pageable</td><td>当前表格的分页数据</td></tr><tr><td>searchParam</td><td>所有的搜索参数，不包含分页</td></tr><tr><td>searchInitParam</td><td>所有的搜索初始化默认的参数</td></tr><tr><td>refresh</td><td>刷新表格数据的方法（携带所有参数）</td></tr><tr><td>search</td><td>表格查询方法，相当于点击搜索按钮</td></tr><tr><td>reset</td><td>重置表格查询参数，相当于点击重置按钮</td></tr><tr><td>handleSizeChange</td><td>表格每页条数改变触发的事件</td></tr><tr><td>handleCurrentChange</td><td>表格当前页改变触发的事件</td></tr><tr><td>clearSelection</td><td>清空表格所选择的数据，除此方法之外还可使用 <code>proTable.value.element.clearSelection()</code></td></tr><tr><td>enumMap</td><td>当前表格使用的所有字典数据（Map 数据结构）</td></tr><tr><td>isSelected</td><td>表格是否选中数据</td></tr><tr><td>selectedList</td><td>表格选中的数据列表</td></tr><tr><td>selectedListIds</td><td>表格选中的数据列表的 id</td></tr></tbody></table><h3 id="table-插槽" tabindex="-1">table 插槽 <a class="header-anchor" href="#table-插槽" aria-label="Permalink to &quot;table 插槽&quot;">​</a></h3><table tabindex="0"><thead><tr><th>插槽名</th><th>描述</th></tr></thead><tbody><tr><td>—</td><td>默认插槽，支持直接在 vsTable 中写 el-table-column 标签</td></tr><tr><td>tableHeader</td><td>自定义表格头部左侧区域的插槽，一般情况该区域放操作按钮</td></tr><tr><td>toolButton</td><td>自定义表格头部左右侧侧功能区域的插槽</td></tr><tr><td>append</td><td>插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。</td></tr><tr><td>empty</td><td>当表格数据为空时自定义的内容</td></tr><tr><td>pagination</td><td>分页组件插槽</td></tr><tr><td><code>column.prop</code></td><td>单元格的作用域插槽</td></tr><tr><td><code>column.prop</code> + &quot;Header&quot;</td><td>表头的作用域插槽</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-beb5ee4a data-v-3565542b><!--[--><!--]--><div class="edit-info" data-v-3565542b><!----><div class="last-updated" data-v-3565542b><p class="VPLastUpdated" data-v-3565542b data-v-e6c1468a>更新时间: <time datetime="2024-12-13T09:53:55.000Z" data-v-e6c1468a></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-3565542b><span class="visually-hidden" id="doc-footer-aria-label" data-v-3565542b>Pager</span><div class="pager" data-v-3565542b><a class="VPLink link pager-link prev" href="/vue-desktop-docs/components/query.html" data-v-3565542b><!--[--><span class="desc" data-v-3565542b>Previous page</span><span class="title" data-v-3565542b>Query - 查询器</span><!--]--></a></div><div class="pager" data-v-3565542b><a class="VPLink link pager-link next" href="/vue-desktop-docs/components/table-select/" data-v-3565542b><!--[--><span class="desc" data-v-3565542b>Next page</span><span class="title" data-v-3565542b>TableSelect - 表格选择器</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_dot_index.md\":\"CQZKc12W\",\"components_filter.md\":\"C3ZW7Bb0\",\"components_flow.md\":\"BWFOOU2z\",\"components_grid_index.md\":\"CfQS4Kh9\",\"components_index.md\":\"BEHd_uve\",\"components_query.md\":\"B5f2NCyW\",\"components_table-select_index.md\":\"FYGUA5sq\",\"components_table_index.md\":\"Clyvrf1v\",\"components_tree.md\":\"BWQzmPZr\",\"components_trend.md\":\"2bJZvXuc\",\"components_upload.md\":\"D18lfnMj\",\"components_wizard.md\":\"CNypuv-t\",\"directives_index.md\":\"DQJEUmpU\",\"directives_v-copy.md\":\"9Y1U7-bO\",\"directives_v-countdown.md\":\"CcEu94Tn\",\"directives_v-debounce.md\":\"CilW_nu_\",\"directives_v-longpress.md\":\"CZXUvyFD\",\"directives_v-throttle.md\":\"DP1jdBqx\",\"directives_v-time.md\":\"BTkCWdRm\",\"directives_v-watermarker.md\":\"BPEZYyv0\",\"guide_index.md\":\"CzPHXAuN\",\"guide_layout.md\":\"OZCi1Pg6\",\"guide_router.md\":\"BeLNCxyF\",\"guide_theme.md\":\"Rq8N6XUV\",\"guide_todo.md\":\"C6nxd0Dx\",\"index.md\":\"B-8QW4hV\",\"utils_aes.md\":\"BF8TN9u9\",\"utils_http.md\":\"BO45rEB7\",\"utils_index.md\":\"CEOoMzTB\",\"utils_local.md\":\"vKg1EF4c\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue Studio\",\"description\":\"vue3 component、directive and template\",\"base\":\"/vue-desktop-docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"lastUpdated\":{\"text\":\"更新时间\",\"formatOptions\":{\"dateStyle\":\"medium\",\"timeStyle\":\"medium\"}},\"outline\":\"deep\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"组件\",\"link\":\"/components/\"},{\"text\":\"指令\",\"link\":\"/directives/\"},{\"text\":\"utils\",\"link\":\"/utils/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"介绍\",\"link\":\"/guide/index\"},{\"text\":\"关于布局\",\"link\":\"/guide/layout\"},{\"text\":\"路由和菜单\",\"link\":\"/guide/router\"},{\"text\":\"主题\",\"link\":\"/guide/theme\"}],\"/components/\":[{\"text\":\"介绍\",\"link\":\"/components/index\"},{\"text\":\"Grid - 网格\",\"link\":\"/components/grid/\"},{\"text\":\"Query - 查询器\",\"link\":\"/components/query\"},{\"text\":\"Table - 表格\",\"link\":\"/components/table/\"},{\"text\":\"TableSelect - 表格选择器\",\"link\":\"/components/table-select/\"},{\"text\":\"Tree - 树\",\"link\":\"/components/tree\"},{\"text\":\"Trend - 趋势\",\"link\":\"/components/trend\"},{\"text\":\"Filter - 分类筛选器\",\"link\":\"/components/filter\"},{\"text\":\"Flow - 流程图\",\"link\":\"/components/flow\"},{\"text\":\"Dot - 圆点\",\"link\":\"/components/dot/\"},{\"text\":\"Wizard - 场景向导\",\"link\":\"/components/wizard\"},{\"text\":\"Upload - 附件上传（开发中）\",\"link\":\"/components/upload\"}],\"/directives/\":[{\"text\":\"介绍\",\"link\":\"/directives/index\"},{\"text\":\"v-copy - 复制\",\"link\":\"/directives/v-copy\"},{\"text\":\"v-countdown - 倒数\",\"link\":\"/directives/v-countdown\"},{\"text\":\"v-debounce - 防抖\",\"link\":\"/directives/v-debounce\"},{\"text\":\"v-throttle - 节流\",\"link\":\"/directives/v-throttle\"},{\"text\":\"v-longpress - 长按\",\"link\":\"/directives/v-longpress\"},{\"text\":\"v-time - 时间转换\",\"link\":\"/directives/v-time\"},{\"text\":\"v-waterMarker - 水印\",\"link\":\"/directives/v-waterMarker\"}],\"/utils/\":[{\"text\":\"介绍\",\"link\":\"/utils/index\"},{\"text\":\"http - 请求\",\"link\":\"/utils/http\"},{\"text\":\"local - 本地存储\",\"link\":\"/utils/local\"},{\"text\":\"AES - 加解密\",\"link\":\"/utils/aes\"}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>